title: 犀利开发—jQuery内核详解与实践-2_jQ解密技术
date: 2018.1.8

toc_fold: unfold

第 1 章 jQ起步

1.1 认识jQuery

1.2 jQuery初步体验

1.3 jQuery核心特性

第 2 章 jQ解密技术

2.1 jQuery框架设计概述

1 设计目标　

选择和操作：选择什么、如何选择、怎么操作、操作什么
学习榜样：css选择器，XPath（很多高级XML应用的基础）

2 目标实现

属性、元素、内容、样式、事件、通信

选择、操作、扩展
执行效率、可用性、兼容性、实用性　

2.2 jQuery原型技术分解

1 起源——原型继承

var $=jQuery=function(){}
jQuery.fn=jQuery.prototype={
    jquery:"1.3.2",
    siez:funciton(){}
}

// INCLUDE:2.2_.html

2 生命——返回实例

3 学步——分隔作用域

4 生长——跨域访问

5 成熟——选择器

6 延续——迭代器

7 延续——功能扩展

jQuery.extend=jQuery.fn.extend=function(obj){
    for(var prop in obj){
        this[prop]=obj[prop]
    }
    return this;
}

8 延续——参数处理

9 涅槃——名字空间

;(function(){
    var
        window=this,
        undefined,
        _jQuery=window.jQuery,
        _$=window.$,
        jQuery=window.jQuery=window.$=function(){},
        isSimple=/^.[^:#\[\.,]*$/;
    jQuery.fn=jQuery.prototype={
        init:function () {

        }
    }
})()

23：23

2018.1.9 二 22：16

2.3 破解jQuery选择器接口

1 简单但很复杂的黑洞

2 盘根错节的逻辑关系

3 jquery构造器

init:function(selector,context){
    selector=selector||document
    if(selector.nodeType){

    }
    if(typeof selector=='string'){
        //quickExpr=/  /
        var match=quickExpr.exec(selector)
        if(){}else if(){}

        //6
        return this.setArray()
    }
}

4 生成DOM元素

jQuery.extend({
    clean:function(element,context,fragment){

    }
})

5 引用DOM元素

jQuery.each({
    parent:function(elem){ return elem.parentNode},
    parents:function(elem){return jQuery.dir(elem,"parentNode")},
    next:function(elem){return jQuery.nth(elem,2,"nextSibling")},
    prev:function(elem){return jQuery.nth(elem,2,"previousSibling")},
    nextAll:function(elem){return jQuery.(elem,"nextSibling")},
    prevAll:function(elem){return jQuery.(elem,)},
    sibling:function(elem){return jQuery.(elem,)},
    children:function(elem){return jQuery.sibling(elem.firstChild)},
    contents:function(elem){return jQuery.(elem,)},
},function(name,fn){
    jQuery.fn[name]=function(selector){

        return this.pushStack(jQuery.unique(ret),name,selector)
    }
})

jQuery.dir=funciton(elem,dir){}
jQuery.nth=funciton(elem,dir){}
jQuery.sibling=funciton(elem,dir){}

2.4 解析jQuery选择器引擎Sizzle

1 回顾css的选择器

2 解析jQuery选择器引擎的设计思路

3 选择器和过滤器

$(“div.red:nth-child(odd)[title=bar]#wrap p”)
p,div,.red,nth,title,#wrap

4 Sizzle引擎结构

1000，jQuery框架的1/4,独立空间，外界无法访问
一个构造器Sizzle;三个核心函数matches,find,filter;一个表达对象selectors

jQuery.find=Sizzle
jQuery.filter=Sizzle.filter
jQuery.expr=Sizzle.selectors
jQuery.expr[“:”]=jQuery.expr.filters

5 Sizzle 构造器

6 Sizzle 选择器

7 Sizzle 过滤器

主要两部分：过滤函数-jQuery.filter；过滤表达式对象

8 jquery 选择器应用优化

id>tag>class 但，实际开发中class频率最高

1. 多用id
2. 少直接用class 用复合tag.class(当然应摒除冗余部分，对不必要的复合表达式简化：#id2#id1、tag#id1
3. 多用父子，少用嵌套 parent>child代替parent child
4. 缓存jQuery对象

   2.5 类数组

   1 定义类数组

   makeArray：把类数组对象的元素全部推进数组对象
   setArray：把类数组对象的元素全部推进当前jQuery对象中
   pushStack：把类数组对象的元素全部推进当前jQuery对象中(新建了一个jQuery对象，有保存了对原对象的引用)

   2 操作类数组

   定位、查找、复制、删除等。注意：由于类数组的操作对象是集合，所以这与类数组包含的DOM元素操作是两个不同的概念
5. 定位元素
   get(),index();get(index),eq(index)
   其他函数：inArray
6. 复制元素
   slice()
   其他函数：merge(first,second)
7. 添加元素
   add()
8. 过滤元素
   filter(selector),not(selector)
   filter:jQuery.grep(elems,callback,inv)+jQuery.multiFilter(expr,elemes,not)
   not建立在filter之上，执行效率更高
9. 映射元素
   each(),map()

第 3 章 高效选择的技巧与原理

第 4 章 文档对象的操作及高效实践

第 5 章 事件封装机制与解析

第 6 章 动画效果设计及其高效实践

第 7 章 Ajax异步通信高效实践

第 8 章 高效开发和使用插件

第 9 章 jQ辅助工具

第 10 章 使用jQ打造Ajax异步交互式动态网站